<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>vue数据的写法</title>

    <script src="D:\ApplicationFiles\vscode\chapter_three\VUE框架\vue\vue.js"></script>

</head>

<body>
    <div id="app">
        <!-- vue的事件,使用v-on调用指定函数 -->
        按钮1:<button onclick="alert(100)">点我</button>
        按钮2:<button v-on:click="show()">点我</button>
        <h2> vue调用无参函数：{{ show() }} </h2>
        <h3> vue调用含参函数：{{ sysout(100) }} </h3>
        <h3> 调用VUE对象：{{ name }} </h3>
        <h3> 调用VUE对象：{{ person.name }} </h3>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                address: "北京",
                name: "张三",
                age: 20,
                person: {
                    name: "jack",
                    age: 18,
                    salary: 1100
                },
                hobby: ["唱", "跳", "rap"],
                url: "https://act.codeboy.com/"
            },
            methods: {
                /* 必须在methods里,创建Vue函数 */
                show: function () {
                    console.log('hello vue');
                },
                sysout: function (num) {
                    console.log(num);
                }
            }
        });
    </script>

</body>

</html>